<template>
  <div class="page_Introduce">

    <van-nav-bar
      title="我发出去的收集表"
      left-arrow
      @click-left="$router.push('/myCompany/companyHome')"
    >
      <template #right>
        <van-icon
          name="add"
          size="20"
          style="margin-right: 20px;"
          @click="handleClickAdd"
        />

        <van-icon
          name="search"
          @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!searchParams.keyword)"
          size="20"
        />
      </template>
    </van-nav-bar>

    <van-search
      v-show='searchBoxShow'
      v-model="searchParams.keyword"
      placeholder="请输入关键字搜索"
      show-action
      shape="round"
      @search="handleSearch"
      @clear="toClearKeyWord"
    >
      <div slot="action" @click="handleSearch">搜索</div>
    </van-search>

    <com-filter-menu
      :rightOptionObj="rightOptionObj"
      :rightOption="rightOption"
      :rightValue="searchParams.job_category_id"
      @getFilterMenuValue="toGetFilterMenuValue_jobSheet"
    ></com-filter-menu>

    <!-- 卡片 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefreshReq">
      <div class="jobArr" v-if="jobSheetList.length">
        <job-item-for-sheet
          v-for="(item, index) in jobSheetList"
          :key="item.id"
          :jobItem="item"
          :keyWord="'myCompany_jobSheet'"
          :parentSearchParams="searchParams"
        ></job-item-for-sheet>
        <van-pagination
          style="margin: 10px 0"
          v-model="searchParams.pageIndex"
          :total-items="total"
          @change="getPaginationValue_jobSheet"
          :items-per-page="searchParams.pageSize"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </div>

      <van-divider style="margin-top: 80px" v-else>暂无记录</van-divider>
    </van-pull-refresh>


  </div>
</template>

<script>
import {Dialog, Toast} from "vant";
import {mapGetters} from "vuex";
import comFilterMenu from "../../../components/comFilterMenu";
import jobItemForRecruit from "../recruitmentManagement/common/jobItemForRecruit";
import jobItemForSheet from "./common/jobItemForSheet";

import {base_url_path} from '../../../constants/comUtils';


const rightOptionObj = {
  '-1': '全部',
  '1': '全职',
  '2': '兼职',
  '3': '小时工'
}
const rightOption = [
  {text: '全部', value: '-1'},
  {text: '全职', value: '1'},
  {text: '兼职', value: '2'},
  {text: '小时工', value: '3'}
];

export default {
  name: "jobSheet",
  components: {
    jobItemForRecruit,
    comFilterMenu,
    jobItemForSheet,
  },

  data(){
    return {
      base_url_path,
      isLoading: false,
      rightOption,
      rightOptionObj,
      searchBoxShow: false,
      jobSheetList: [],
      total: 0,
      searchParams: {
        // 全部
        job_category_id: '-1',
        keyword: '',
        pageIndex: 1, // 当前页
        pageSize: 10, // 每页显示条数
      },
    }
  },


  computed:{
    ...mapGetters(['allUserInfo']),
  },

  mounted() {
    // 初始化
    this._getJobSheet(this.searchParams);
  },

  methods: {

    onRefreshReq(){
      // this.initParamObj.pageIndex = 1
      // this._initPageData(this.initParamObj, true);
      Object.assign(this.searchParams, {pageIndex: 1});
      // 指定页
      this._getJobSheet(this.searchParams);

    },

    async _getJobSheet(paramsObj) {
      // 列表接口
      const resp = await this.$api.others.reqGetJobSheetLists(paramsObj);
      if (resp.code === 200){
        this.jobSheetList = resp.data.items
        this.total =  resp.data.count

        // 不需要刷新状态
        this.isLoading = false;
      }
    },

    handleSearch() {
      this.searchParams.pageIndex = 1
      if(this.searchParams.keyword.trim()){
        this.$nextTick(()=>{
          this._getJobSheet(this.searchParams);
        });
      } else {
        Toast('请先输入！');
      }
    },

    getPaginationValue_jobSheet(pageIndex) {
      Object.assign(this.searchParams, {pageIndex});
      // 指定页
      this._getJobSheet(this.searchParams)
    },

    toClearKeyWord(isQuery = true){
      if(!isQuery){
        return null
      }
      this.searchParams.keyword = '';
      this.searchParams.pageIndex = 1;
      this.searchParams.job_category_id = '-1'
      this.$nextTick(() => {
        this._getJobSheet(this.searchParams)
      })
    },

    handleClickAdd(){
      // 添加, 发出去的id
      // console.log('添加---用户id', this.allUserInfo.ids);
      let pathUrl = `${this.base_url_path}/#/info?ids=${this.allUserInfo.id}`;
      Dialog.confirm({
        title: '我的收集表链接',
        message: `${pathUrl}`,
        confirmButtonText: '确定复制',
        messageAlign: 'left',
      }).then(() => {
        // on close
        this.$copyText(pathUrl).then(
          function (e) {
            Toast('复制成功')
          },
          function (e) {
            Toast('复制出错了！');
          }
        )
      }).catch(()=>{

      })
    },


    toGetFilterMenuValue_jobSheet(val) {
      Object.assign(this.searchParams, {
        job_category_id: val,
        pageIndex: 1,
      });
      this.$nextTick(()=>{
        this._getJobSheet(this.searchParams);
      });
    },
  }
}
</script>

<style scoped>

</style>
